<template>
	<view class="page">
		<!-- <u-sticky> -->
		<!-- :class="{show_background_color: show_background_color}"  -->
		<view class="page-navbar">
			<view class="head-nav">
				<u-navbar leftText="分类" leftIconSize="0" leftIconColor="#000" :fixed="true" :placeholder="true"
					:bgColor="headBackground" :autoBack="false">
				</u-navbar>
			</view>

			<view class="head-search">
				<u-search v-model="keyword" height="60rpx" bgColor="#F8F8F8" 
				:showAction="false" :searchIconSize="28"
				searchIconColor="#000000" 
					placeholderColor="#959595" placeholder="搜索商品名称" @search="handleSearch"></u-search>
			</view>

			<view class="page-ctx">
				<view class="page-ctx-inner">

					<scroll-view scroll-y scroll-with-animation class="left-cate-view menu-scroll-view" :scroll-top="scrollTop">
						<view class="cate-list">
							<view v-for="(item,index) in categoryList" :key="item.id" class="cate-item"
								:class="[category_id == item.id ? 'cate-item-active' : '']" :data-current="item.id"
								@tap.stop="toggleCate(item)">
								<view class="cate-title">
									{{item.title}}
								</view>
							</view>
						</view>
					</scroll-view>

					<scroll-view scroll-y class="right-container" @scrolltolower="scrolltolower">
						<view class="page-view">
							<view class="class-item">
								<view class="right-cat-title">
									<!-- {{category_select.title || ''}} -->
									{{open_search ? '搜索结果' :'为您推荐'}}
								</view>

								<view class="item-container">
									<view class="product-list">
										<view class="product-item" v-for="(item,index) in products" :key="index" @click="toDetail(item)">
											<view class="poster-box">
												<image class="poster" :src="item.thumb" mode="aspectFill"></image>
											</view>
											<view class="info-box">
												<view class="title ellipsis-2">
													{{item.title}}
												</view>
												<view class="desc-box" v-if="item.subtitle">
													<view class="desc ellipsis-1" >
														{{item.subtitle}}
													</view>
												</view>

												<view class="price-box flex-between">
													<view class="price-info">
														<text class="huobi">￥</text>
														<text class="price">{{item.priceSale}}</text>
													</view>
													<view class="add-box flex-center" @click.stop="doAddCart(item)">
														<u-icon name="plus-circle-fill" color="#CB0011" size="32"></u-icon>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="load-more-box" style="margin-top: 60rpx;">
										<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<product_sku_pop ref="product_sku_pop" position="分类" @confirm="confirmGuige" />

		<!-- <cartBottom ref="CartBottom" @delAll="delcarAll"></cartBottom> -->

	</view>
</template>

<script>
	import product_sku_pop from "@/components/product/product_sku_pop.vue";
	// import cartBottom from '@/components/cart/cart_bottom.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			product_sku_pop,
			// cartBottom
		},
		data() {
			return {
				defaultHeadBackground: 'transparent',
				headBackground: 'rgba(255,255,255)', //控制顶部标题栏颜色 默认透明颜色 transparent
				keyword: '',
				open_search: false,
				//
				categoryList: [],
				products: [],
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
				pagination: {
					page: 1,
					page_num: 10
				},
				category_select: {},
				category_id: '',

				scrollTop: 0,
				is_tabbar_page: false, //当前页面是否为tabbar 页面
				//
				cart_is_selected_all: false,
				cart_products: [], //产品列表
				cart_total_num: 0, //购物车总数量
				cart_total_price: 0, //购物车总金额
				showCarPoup: false,
				SelectCarList: [], //点击加入购物车的数据
			}
		},
		computed: {
			// ...mapState([
			// 	// '',
			// ])
		},
		onPageScroll(e) {
			// console.log(e)
			let percent = e.scrollTop / 50;
			percent = percent < 1 ? percent : 1

			this.headBackground = `rgba(255,255,255,${percent})`

			if (e.scrollTop != 0) {
				// this.headBackground = this.statusBackgroundMap[this.userRole]
			} else {
				// this.headBackground = ''
			}
		},
		onLoad(option) {
			console.log('category onLoad', option)
			// if (!this.is_tabbar_page) {	
			// }
			this.query_cate({
				id: option.id || ''
			});
		},
		onShow() {
			console.log('category onShow')
			let cache_tabbar_query = uni.getStorageSync('cache_tabbar_query')
			console.log('分类初始参数 cache_tabbar_query', cache_tabbar_query)
			this.query_cart()
			this.initCategoryItem(cache_tabbar_query)
		},
		onHide() {
			console.log('category onHide')
		},
		onPullDownRefresh() {
			// setTimeout(() => {
			// 	uni.stopPullDownRefresh()
			// }, 500)
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			//移除缓存
			clearCacheData() {
				uni.removeStorageSync('cache_tabbar_query')
			},

			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_product();
				}
			},
			initQuery() {
				this.products = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			query_cate(cateParams) {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_channel',
					},
				}).then(res => {
					if (res.code == 200) {
						this.categoryList = res.data || [];
						if (this.categoryList.length) {
							this.initCategoryItem(cateParams)
							this.query_product()
						}
					}
				})
			},

			initCategoryItem(params = {}) {
				console.log('初始化分类勾选 步骤', 1)
				if (!this.categoryList.length) {
					return
				}
				console.log('初始化分类勾选 步骤', 2)

				//设置默认分类
				let prev_category_id = this.category_id;

				let category_active = null;
				if (params.id) {
					category_active = this.categoryList.find(v => v.id == params.id)
				}
				this.category_select = category_active || this.categoryList[0] || {};
				this.category_id = this.category_select.id;

				this.$log('默认分类', this.category_select)
				//设置默认分类

				console.log('initCategoryItem prev_category_id', prev_category_id)
				console.log('initCategoryItem 查询参数 params', params)

				// 分类不一致
				if (prev_category_id != params.id) {
					this.initQuery();
					this.query_product()

					this.clearCacheData();
				}
			},

			//
			query_product() {

				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						...this.pagination,
						channelId: this.category_id,
						keyword: this.keyword || '',
					},
				}).then(res => {
					if (res.code == 200) {
						let count = res.data.count || 0;
						let list = res.data.list  || []
						this.products = this.products.concat(list);
						this.loadmore_status = count > this.products.length ? 'loadmore' : 'nomore';
					}
				})
			},
			toggleCate(item) {
				if (this.category_id == item.id) {
					return
				}

				this.category_id = item.id
				this.category_select = item

				this.initQuery();
				this.query_product()
			},
			toDetail(item) {
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId
					}
				})
			},

			//触底事件
			scrolltolower() {
				console.log('滚动到底部 scrolltolower')
				this.loadMore()
				// if (this.loadmore_status == 'noMore') {
				// 	return false
				// }
				// this.get_list()
			},


			handleSearch() {
				this.open_search = !!this.keyword
				this.category_id = ''
				this.initQuery();
				this.query_product();
			},


			doAddCart(item) {
				this.$log('产品加入购物车', item)
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_detail',
						inventoryId: item.inventoryId
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						data.kucun = parseInt(data.kucun)
						this.set_specifications(data);
						data.guigeList = this.list_specifications
						this.$refs.product_sku_pop.init(data)
					}
					this.hideLoading()
				});
			},
			confirmGuige(data) {
				this.query_cart()
			},
			//设置规格
			set_specifications(data) {
				//规格列表组
				let inventorys = data.inventorys;
				let list_specifications = [];
				if (inventorys && inventorys.length) {
					inventorys.forEach((v) => {
						list_specifications.push({
							...v,
							kucun: parseInt(v.kucun),
							keyVals: v.keyVals,
						});
					});
				} else {
					let item = data;
					list_specifications = [{
						status: item.product_status,
						image: item.images[0],
						inventoryId: item.inventoryId,
						keyVals: item.keyVals == "无" ? "默认" : item.keyVals,
						kucun: parseInt(item.kucun),
						priceMarket: item.priceMarket,
						priceSale: item.priceSale,
						priceSale2: item.priceSale2,
						priceSale3: item.priceSale3,
						nums1: item.nums1,
						nums2: item.nums2,
					}];
				}

				//单规格商品 默认勾选
				if (list_specifications.length == 1) {
					this.select_specifications = list_specifications[0];
				} else {
					// this.select_specifications = {};
					this.select_specifications =
						list_specifications.find((v) => v.inventoryId == this.id) || {};
				}
				this.list_specifications = list_specifications;

				//规格拆分
				let skus = data.skus || {};
				if (skus && Object.keys(skus).length) {
					this.sku_mode = "多规格";
					let select_shuxing_list = [];
					Object.keys(skus).forEach((v) => {
						select_shuxing_list.push({
							key: skus[v].key,
						});
					});

					//console.log("商品规格默认 select_shuxing_list", select_shuxing_list);
					this.select_shuxing_list = select_shuxing_list;
				} else {
					this.sku_mode = "单规格";
				}
			},


			query_cart() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'gouwuche_lists',
					},
				}).then(res => {
					if (res.code == 200) {
						let cart_total_num = 0;
						let cart_total_price = 0;
						this.cart_is_selected_all = false
						res.data.forEach(v => {
							v.num = parseInt(v.num);
							v.is_selected = false;
							v.keyVals = v.keyVals == '无' ? '默认' : v.keyVals
							cart_total_num += parseInt(v.num)
							cart_total_price += parseInt(v.num) * parseFloat(v.priceSale)
						})
						this.cart_total_num = cart_total_num;
						this.cart_total_price = (parseFloat(cart_total_price)).toFixed(2);
						this.cart_products = res.data;
						
						this.$store.commit('set_vuex_cart_number', cart_total_num)

						// this.$refs.CartBottom.init(this.cart_products, this.cart_total_num);
					}
				})
			},

			delcarAll() {
				this.cart_products = [] //产品列表
				this.cart_total_num = 0 //购物车总数量
				this.cart_total_price = 0 //购物车总金额
				this.SelectCarList = []
				this.$store.commit('set_vuex_cart_number', 0)
			}

		}
	}
</script>


<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-head-bg-box {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		/* height: 562rpx; */

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 设置标题左对齐
	.page-navbar ::v-deep .u-navbar__content__left {
		// display: none;
	}

	.page-navbar ::v-deep .u-navbar__content__title {
		flex: 1;
		padding-left: 32rpx;
		text-align: left;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
	}

	.page-navbar {
		background: #fff;
		background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
		background: transparent;
		// height: 176rpx;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;

		&.show_background_color {
			background: #ffffff !important;

			.head-nav {
				background: #ffffff !important;
			}

			.head-search {
				background: #ffffff !important;
			}
		}


		.head-nav {
			background: linear-gradient(179deg, #4EC2FF 0%, #7BE1DC 100%);
			background: transparent;

			.head-nav-left-box {
				width: 270rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				.nav-left-text {
					margin-left: 6rpx;
					flex: 1;

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}
			}
		}


		.head-search {
			height: 104rpx;
			padding: 20rpx 30rpx;
			background: #FFFFFF;

			.search-box {
				width: 100%;
				height: 72rpx;
				background: #F6FAFD;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				// box-shadow: none;
				border-radius: 36rpx 36rpx 36rpx 36rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 22rpx;
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #838B9E;
				}

				.btn {
					width: 112rpx;
					height: 48rpx;
					background: #CB0011;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	// 设置标题左对齐
	.head-search-wrap {
		height: 100rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #FFFFFF;


		.head-search {
			width: 100%;
			height: 100rpx;
			padding: 20rpx 30rpx;
			background: linear-gradient(180deg, #7BE1DC 0%, rgba(123, 225, 220, 0) 96%, rgba(123, 225, 220, 0) 100%);
			background: #FFFFFF;

			.search-box {
				width: 100%;
				height: 60rpx;
				padding: 0 30rpx;
				background: linear-gradient(180deg, #ECFAF9 0%, #FFFFFF 100%);
				background: #F5F5F5;
				// box-shadow: 0rpx 10rpx 20rpx 1rpx rgba(5, 57, 55, 0.08);
				border-radius: 32rpx 32rpx 32rpx 32rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 22rpx;
				}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
			}
		}



		.head-search-input-wrap {
			padding: 20rpx 20rpx;
			background-color: #fff;
		}

		::v-deep .uicon-search {
			font-size: 40rpx !important;
		}

	}




	.page {
		.page-ctx {
			width: 100%;
			height: calc(100vh);
			position: relative;

			.page-ctx-inner {
				flex: 1;
				display: flex;
				overflow: hidden;
				// margin-top: 20rpx;
			}
		}
	}



	.left-cate-view {
		width: 184rpx;
		flex-grow: 0;
		flex-shrink: 0;
		height: 100%;
		box-sizing: border-box;
		// border-right: 2rpx solid #EAEAEA;
		background: #F6F7FB;
		/* position: fixed; */
		left: 0;
		top: 100rpx;
		width: 160rpx;

		height: 100%;
		background: #fff;
		background: #FFFFFF;


		.cate-item {
			min-height: 96rpx;

			// background: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #222222;

			.cate-title {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				padding: 0 4rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #878998;
			}

		}

		.cate-item-active {
			position: relative;
			background: #fff;
			background: #F6FAFD;
background: #F8F8F8;

			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #222222;

			.cate-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #CB0011;
			}
		}


		.cate-item-active::before {
			content: "";
			position: absolute;
			// border-left: 4px solid #3bd072;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);

			width: 4rpx;
			height: 40rpx;
			background: #CB0011;
		}

	}







	.right-container {
		// background-color: rgb(250, 250, 250);
		position: absolute;
		right: 20rpx;
		width: 568rpx;
		height: 100%;
		padding-bottom: 160rpx;
		/* top:110rpx; */
	}


	.page-view {
		.class-item {
			margin-bottom: 10rpx;
			border-radius: 8rpx;

			.right-cat-title {
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}

			.item-container {
				display: flex;
				flex-direction: column;
				margin: 0 0 0 0;

				.thumb-box {
					display: flex;
					flex-direction: row;
					padding: 32rpx 24rpx;
					background: #fff;
					margin-bottom: 16rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.item-menu-image {
						position: relative;
						width: 168rpx;
						height: 168rpx;
						border-radius: 8rpx 8rpx 0rpx 0rpx;

						image {
							width: 100%;
							height: 100%;
						}

						.m-item-img-over {
							position: absolute;
							width: 168rpx;
							height: 168rpx;
							top: 0;
							left: 0;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.thumb-box-right {}
				}
			}
		}
	}







	.product-list {
		padding-left: 30rpx;

		.product-item {
			padding: 40rpx 24rpx;
			// border-bottom: 1rpx solid #EEEEEE;
			background: #FFFFFF;
			margin-bottom: 16rpx;
			display: flex;

			/* align-items: center; */
			.poster-box {
				width: 136rpx;
				height: 136rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.poster {
					width: 136rpx;
					height: 136rpx;
				}
			}

			.info-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow: hidden;
				padding-left: 24rpx;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;
				}

				.desc-box {
					margin-top: 8rpx;
					/* height: 30rpx; */

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838B9E;
					}
				}

				.price-box {
					margin-top: 18rpx;

					.price-info {
						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.price {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
						}
					}

					.add-box {
						width: 60rpx;
						height: 60rpx;

						/deep/.u-icon__icon {
							font-size: 32rpx !important;
							color: #CB0011 !important;
						}
					}
				}
			}
		}
	}

	/deep/.info-modal-inner {
		// padding-bottom: 180rpx !important;
	}
</style>